<template>
    <div class="header">
        <video loop autoplay muted src="./vedio/bg.mp4" class="header-video"></video>
        <img src="./image/bg.png" alt="" class="header-front-img">
    </div>
</template>

<script>
export default {
    name: "home-top",
    mounted() {
        var header = document.querySelector(".header")
        var headerVideo = document.querySelector('.header-video')
        var headerFrontImg = document.querySelector('.header-front-img')
        // 鼠标进入时的位置横坐标
        var posX

        // 鼠标进入时
        header.onmouseover = function (e) {
            posX = e.clientX
            headerVideo.style.transition = "none"
            headerFrontImg.style.transition = "none"
        }
        // 鼠标移动时，头部跟随
        header.onmousemove = function (e) {
            // 模板字符串（不是单引号，是键盘数字1的左边按钮）
            headerVideo.style.transform = `translateX(${(e.clientX - posX) / 25}px)`
            headerFrontImg.style.transform = `translateX(${(e.clientX - posX) / 16}px)`
        }
        // 鼠标离开时头部回正（前景、背景的回正速度不一样）
        header.onmouseout = function (e) {
            headerVideo.style.transition = ".6s"
            headerFrontImg.style.transition = "1.2s"
            headerVideo.style.transform = `translateX(0px)`
            headerFrontImg.style.transform = `translateX(0px)`
        }
    },
}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin-bottom: 20px;
}

.header-video {
    height: 100%;
}

.header-front-img {
    /* 为了实现缩小时仍然可以看见叶子 */
    width: 120%;
    position: absolute;
    bottom: 0;
}
</style>